import { useEffect, useState } from "react";
import dayjs from "dayjs";
import "./index.less";

interface PhoneViewProps {
  text: string;
  image: string;
}

const PhoneView = ({ text, image }: PhoneViewProps) => {
  const [time, setTime] = useState("");
  useEffect(() => {
    let timer = setInterval(() => {
      setTime(dayjs(new Date()).format("HH:mm"));
    }, 1000);

    return () => {
      clearInterval(timer);
    };
  });

  return (
    <>
      <img
        alt=""
        src="https://assets.weibanzhushou.com/web/we-work-webapp/phone.1c130fa643cd.png"
        className="bg"
      />
      <section className="preview-content">
        <p className={`date ${text || image ? "" : "none"}`}>{time}</p>
        <div className="phone-inner">
          <div className={`message message-text  ${text ? "" : "none"}`}>
            <img
              alt=""
              className="avatar"
              src="https://assets.weibanzhushou.com/web/we-work-webapp/avatar-default.af3289dacfcf.svg"
            />
            <div>{text}</div>
          </div>
          <div className={`message message-image ${image ? "" : "none"}`}>
            <img
              alt=""
              className="avatar"
              src="https://assets.weibanzhushou.com/web/we-work-webapp/avatar-default.af3289dacfcf.svg"
            />
            <img src={image} alt="" className="image" />
          </div>
        </div>
      </section>
    </>
  );
};

export default PhoneView;
